.fruits {
    width: 100%;
    padding-top: 32px;
    >.fruits-center {
        width: 1200px;
        margin: 0 auto;
        >.fruits-top {
            overflow: hidden;
            >.top-left {
                float: left;
            }
            >.top-right {
                float: right;
                font-size: 12px;
                >span {
                    display: inline-block;
                    width: 86px;
                    line-height: 30px;
                    text-align: center;
                    >a {
                        color: #ccc;
                        text-decoration: none;
                    }
                    &:hover {
                        color: #fff;
                        background-color: blue;
                    }
                }
            }
        }
        // bottom
        >.fruits-bottom {
            display: flex;
            >.left {
                width: 180px;
                >.img {
                    margin-left: -9px;
                }
                >.middle {
                    margin-top: -4px;
                    width: 211px;
                    line-height: 32px;
                    background-color: rgb(113, 113, 233);
                    >a {
                        text-decoration: none;
                        color: #fff;
                        margin-left: 15px;
                        &:hover {
                            text-decoration: underline #fff;
                        }
                    }
                }
                >.bottom {
                    width: 168px;
                    height: 144px;
                    padding: 5px 0 10px 13px;
                    font-size: 12px;
                    background-color: blue;
                    >div:nth-last-child(1) {
                        margin-bottom: 0px;
                    }
                    >div {
                        display: flex;
                        margin-bottom: 15px;
                        >a {
                            margin-right: 10px;
                            color: #fff;
                            text-decoration: none;
                            &:hover {
                                text-decoration: underline #fff;
                            }
                        }
                    }
                }
            }
            // 
            >.middle-img {
                position: relative;
                >div:nth-child(2) {
                    z-index: 2;
                    position: absolute;
                    bottom: 15px;
                    left: 12px;
                    >div:nth-child(1) {
                        margin-bottom: 1px;
                        display: flex;
                        >div {
                            margin-left: 1px;
                            width: 122px;
                            height: 50px;
                            line-height: 50px;
                            text-align: center;
                            background-color: #fff;
                            opacity: 0.8;
                            &:hover {
                                opacity: 1;
                                background-color: #fff;
                            }
                        }
                    }
                    >div:nth-child(2) {
                        display: flex;
                        >div {
                            margin-left: 1px;
                            width: 122px;
                            height: 50px;
                            line-height: 50px;
                            text-align: center;
                            background-color: #fff;
                            opacity: 0.8;
                            &:hover {
                                opacity: 1;
                                background-color: #fff;
                            }
                        }
                    }
                }
            }
            // 
            >.right {
                width: 631px;
                border-top: 1px solid blue;
                >div:nth-child(2) {
                    border-bottom: none;
                }
                >div {
                    display: flex;
                    border-bottom: 1px solid #ccc;
                    >div:nth-last-child(1) {
                        border-right: none;
                    }
                    >div {
                        border-right: 1px solid #ccc;
                    }
                }
            }
        }
    }
}